﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无刷新评论文章Demo</title>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // ***********      http://www.cnblogs.com/heqichang/archive/2010/10/03/1841716.html      *************

        $(function () {

            //加载文章、评论
            $.post("LoadArticles.ashx", { "article": 200 }, function (data, state) {
                if (state == "success") {
                    //利用"--------"来分隔标题和正文
                    var article = data.split("-");
                    $("#article h2").text(article[0]);
                    $("#article").append(article[1]);
                }
            });

            //加载初始的10条评论数
            $.post("LoadCommentsBySplitPage.ashx", { "action": "load" }, function (data, state) {
                if (state == "success") {
                    var comments = $.parseJSON(data);
                    for (var i = 0; i < comments.length; i++) {
                        var comment = "<tr><td style='color:#E97946;text-align:right'>" + comments[i].UserNick + "说:</td><td align='left'>" + comments[i].Message + "</td><tr>";
                        $("#comment").append(comment);
                    }
                }
            });
        }); //$(function () {}结束

        /**************************************************************************************************************************/

        //标记当前页加载评论的次数
        var flags = 1;

        //标记当前页码
        var currentPage = 1;

        //全局方法:检测是否需要加载评论
        function checkComment(n) {
            //检测浏览器模式，不同模式获取的客户端高度是不同的
            //其中“CSS1Compat ”指的是 标准兼容模式开启
            var dom = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
            var pre = document.getElementById("preload");

            //获取滚动条离顶端的高度，其中，IE：document.scrollTop;  Chrome:document.body.scrollTop
            var scrTop = document.scrollTop || document.body.scrollTop;

            //全局变量：保存传入的当前页码索引
            currentPage = n;

            //当客户端显示的窗口、标记的地方 相差小于100，就开始加载评论
            if (pre.offsetTop - (dom.clientHeight + scrTop) < 100) {
                //加载评论
                $.post("LoadCommentsBySplitPage.ashx", { "action": "pageOrlazy", "page": currentPage, "count": flags }, function (data, state) {
                    if (state == "success") {
                        var comments = $.parseJSON(data);
                        for (var i = 0; i < comments.length; i++) {
                            var comment = "<tr><td style='color:#E97946;text-align:right'>" + comments[i].UserNick + "说:</td><td align='left'>" + comments[i].Message + "</td><tr>";
                            $("#comment").append(comment);
                        }
                    }
                });

                // 增加加载评论次数
                flags = flags + 1;

                // 如果当前页加载评论的次数超过3次，就不加载评论了，就应该增加页码索引号
                if (flags <= 2) {
                    setTimeout("checkComment(currentPage)", 2000);
                }
                else {
                    // 加载页码
                    $.post("LoadCommentsBySplitPage.ashx", { "action": "pagenumber" }, function (data, state) {
                        if (state == "success") {
                            var count = parseInt(data, 10);
                            for (var i = 1; i <= count + 1; i++) {
                                //定义显示 分页按钮
                                var controlPage;
                                if (i != currentPage) {
                                    //显示分页链接数字
                                    controlPage = "<td> <a href=''>" + i + "</a></td>";
                                }
                                else {
                                    //等于当前页时候，就 只显示数字，不显示链接
                                    controlPage = "<td>" + i + "</td>";
                                }
                                $("#anchorlink").append(controlPage);
                            }
                            //加载分页点击时的事件
                            $("#anchorlink td").click(function (e) {
                                e.preventDefault(); //阻止超链接的转向
                                $("#comment").empty(); // 清空评论区数据
                                $("#anchorlink").empty(); //清空页码
                                $("#preload").text("评论正在加载中。。。。。。");
                                flags = 0;
                                var page = parseInt($(this).text(), 10);
                                checkComment(page);
                            });
                        }
                    });
                    //隐藏显示“正在加载评论。。。”字样
                    $("#preload").text("");
                }
            }
            else {
                setTimeout("checkComment(currentPage)", 2000);
            }
        }
        //每隔两秒检查页面是否需要加载评论
        setTimeout("checkComment(currentPage)", 2000);
       
    </script>
</head>
<body>
    <div id="main">
        <div id="article">
            <h2 style="text-align: center">
            </h2>
        </div>
        <div>
            <h4 style="text-align: center">
                关于本文的评论：
            </h4>
            <table id="comment">
            </table>
            <p id="preload">
                评论加载中。。。。。。
            </p>
            <table>
                <tr id="anchorlink">
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
